<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #navbar {
            position: fixed;
            left: 0;
            right: 0;
            height: 60px;
            z-index: 10000;
            background:rgba(0,0,0,.6);
            display:flex;
            justify-content: flex-end;
            align-items:center;
        }

        #navbar a{
            font-size:20px;
            color:rgba(255,255,255,.5);
            text-decoration: none;
            display:inline-block;
            margin: 0 20px;
            transition: .2s;
        }

        #navbar a:hover{
            color:rgba(255,255,255,1);
            text-shadow: 0 0  10px #fff;
        }

        #welcome-section .background{
            height: 100vh;
            padding-top:60px;
            box-sizing: border-box;
            background-size: cover;
            background: url(https://desk-fd.zol-img.com.cn/t_s2560x1600c5/g3/M08/0F/01/Cg-4V1RIZXuIDjyiAA1CsLoDDeMAAQZywLcqgEADULI711.jpg) no-repeat fixed center center;
            position:relative;
        }
        #welcome-section .background:after{
            content:'';
            display: block;
            position:absolute;
            top:0;
            left:0;
            right:0;
            bottom:0;
            width:100%;
            height:100%;
            background:repeating-linear-gradient(transparent, rgba(0,0,0,.8) 4px , transparent 0, rgba(255,255,255,.2) 4px );
        }
        .content{
            position:absolute;
            top:0;
            left:0;
            right:0;
            bottom:0;
            color:#fff;
            text-align:center;
            display: flex;
            flex-direction: column;
            justify-content:center;
        }
        .content p,.title{
            font-size:40px;
            text-shadow :0 0 15px #f1f1f1;
        }

        .cursor{
            display: inline-block;
            width:5px;
            height:34px;
            background:#fff;
            margin:0 10px;
            box-shadow: 0 0 10px #fff;
            animation: flash 1s linear infinite;
        }
        @keyframes flash{
            0% {
                opacity:0;
            }
            49%{
                opacity:0;
            }
            50%{
                opacity:1;
            }
            99%{
                opacity:1;
            }
            100%{
                opacity:0;
            }
        }

        #projects{
            height:100vh;
            background:#000;
            display: flex;
            justify-content:space-around;
            align-items:center;
            flex-wrap:wrap;
        }
        .project-title{
            display: block;
            color:#fff;
            text-decoration: none;
            width: 280px;
            height:280px;
            border:1px solid #fff;
            margin: 20px;
            font-size:20px;
            border-radius: 10px;
            box-shadow: 0 0 10px #fff;
            background:rgba(255,255,255,.1);
            padding: 20px;
            box-sizing: border-box;
            transition: .2s;
        }

        .project-title:hover{
            background:rgba(255,255,255,.2);
            box-shadow: 0 0 20px #fff;
            transform: scale(1.1);
        }

        #findMe {
            position: relative;
        }

        #findMe .background{
            height: 70vh;
            padding-top:60px;
            box-sizing: border-box;
            background-size: cover;
            background: url(https://desk-fd.zol-img.com.cn/t_s2560x1600c5/g3/M08/0F/01/Cg-4V1RIZXuIDjyiAA1CsLoDDeMAAQZywLcqgEADULI711.jpg) no-repeat fixed center center;
            position:relative;
        }
        #findMe .background:after{
            content:'';
            display: block;
            position:absolute;
            top:0;
            left:0;
            right:0;
            bottom:0;
            width:100%;
            height:100%;
            background:repeating-linear-gradient(transparent, rgba(0,0,0,.8) 4px , transparent 0, rgba(255,255,255,.2) 4px );
        }

        footer{
            height:30vh;
            background:#000;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items:center;
        }
        footer p{
            margin:0;
            padding:20px;
            color:#fff;
        }
        .codepen {
            display: block;
            width:300px;
            height:60px;
            background:url(https://static.codepen.io/assets/logos/codepen-logo-eccd67a3067908687f74b7725787a321b0a13ce18601ba839aaab2bd8df9d772.svg) no-repeat;
            border: 2px solid #fff;
            margin:0 auto;
        }
        #profile-link{
            color :#fff;
            font-size:30px;
            padding:20px;
        }

        @media screen and (max-width: 414px) {
            #navbar a{
                font-size:14px;
                text-transform:uppercase;
                height:20px;
                overflow:hidden;
            }
            .project-title{
                height:100px;
            }
        }
    </style>
</head>
<body>
<nav id="navbar">
    <a href="#welcome-section">About Me</a>
    <a href="#projects">Watch Me</a>
    <a href="#findMe">Find Me</a>
</nav>
<main>
    <section id="welcome-section">
        <div class="background"></div>
        <div class="content">
            <h1 class="title"> Hi, I'm Jfreey</h1>
            <p>Let us build the world</p>
            <p>Just do it<i class="cursor"></i></p>
        </div>
    </section>
    <section id="projects">
        <a href="https://codepen.io/jfreey/full/vQERdo" target="_blank" class="project-title">
            01 - Build a Tribute Page
        </a>
        <a href="https://codepen.io/jfreey/full/XymrZb" target="_blank" class="project-title">
            02 - Build a Survey Form
        </a>
        <a href="https://codepen.io/jfreey/full/JeYdbG" target="_blank" class="project-title">
            03 - Build a Product Landing Page
        </a>
        <a href="https://codepen.io/jfreey/full/JeGGZx" target="_blank" class="project-title">
            04 - Build a Technical Documentation Page
        </a>
    </section>
    <section id="findMe">
        <div class="background"></div>
        <div class="content">
            <i class="codepen"></i>
            <a href="https://codepen.io/jfreey/" id="profile-link" target="_blank">Find Me</a>
        </div>
    </section>
</main>
<footer>
    <p>Demo page not real</p>
    <p>© Created for FreeCodeCamp</p>
</footer>
</body>
</html>